<template>
    <div>
      <div style="margin: 20px 0;margin-left: 5%">
        <Row>
          <Col span="6">
            <span>姓名：</span>
            <Input  placeholder="请输入姓名" clearable style="width: 200px" v-model="name"/>
          </Col>
          <Col span="6" class="xiao">
            <span>职位： </span>
            <Input  placeholder="请输入职位" clearable style="width: 200px" v-model="zw"/>
          </Col>
          <Col span="3" class="ruyuna">
            <Button type="primary" size="large" @click="find">查询</Button>
          </Col>
        </Row>
      </div>
      <Table border :columns="columns12" :data="data4">
        <template slot-scope="{ row }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show">查看详情</Button>
          <Button type="error" size="small" style="margin-right: 5px"   @click="show1">绩效对比</Button>
          <Button type="error" size="small" @click="modal3=true">评分</Button>
        </template>
      </Table>
      <Modal
        v-model="modal1"
        width="1000"
        title="详细信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <div>
          <Table border :columns="columns13" :data="data7"></Table>
          <div class="page_style">
            <Page :total="100"   class="page_style"/>
          </div>
        </div>
      </Modal>
      <Modal
        v-model="modal2"
        width="1400"
        title="对比图表"
        @on-ok="ok"
        @on-cancel="cancel">
    <div style="display: flex;justify-content: space-around;margin-top: 20px">
          <div style="width: 500px;height: 500px">
            <my-chart-line text="外出次数" style="width: 500px;height: 500px" :values="data"></my-chart-line>
            <div style="text-align: center">
              外出次数20次
            </div>
          </div>
          <div style="width: 500px;height: 500px">
            <my-chart-line text="办结量" style="width: 500px;height: 500px" :values="data1"></my-chart-line>
            <div style="text-align: center">
              办结量1600件
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: space-around;margin-top: 20px">
          <div style="width: 500px;height: 500px">
            <my-chart-line text="投诉率" style="width: 500px;height: 500px" :values="data3"></my-chart-line>
            <div style="text-align: center">
              投诉率2%
            </div>

          </div >
          <div style="width: 500px;height: 500px">
            <my-chart-line text="办结率" style="width: 500px;height: 500px" :values="data2"></my-chart-line>
            <div style="text-align: center">
              办结率98%
            </div>
          </div>
        </div>
        <div>
        </div>
      </Modal>

      <Modal
        v-model="modal3"
        @on-ok="ok"
        @on-cancel="cancel">
        <div style="font-size: 15px;font-weight: bold">内部评价</div><br>
        <div style="text-indent: 2em;font-size: 14px">&nbsp;&nbsp;外出次数:5.3分</div>
        <div style="font-size: 15px;margin-top: 10px;font-weight: bold">外部评价</div>
        <div style="text-indent: 2em;margin: 5px;font-size: 14px">办结量:7.5分,&nbsp;投诉率:10分,&nbsp;办结率:8.8分</div>
<!--        <div style="text-indent: 3em;margin: 5px">投诉率:10分</div>-->
<!--        <div style="text-indent: 3em;margin: 5px">办结率:10分</div>-->
        <div style="text-indent: 2em;margin: 5px;font-size: 14px">总分:外出次数5.3分&nbsp;+&nbsp;办结量7.5分&nbsp;+&nbsp;投诉率10分&nbsp;+&nbsp;办结率8.8分&nbsp;=&nbsp;31.6分</div>
      </Modal>
      <div class="page_style">
        <Page :total="100"   class="page_style"/>
      </div>
    </div>
</template>

<script>
import { MyChartLine } from '_c/charts'
export default {
  name: 'index',
  components: {
    MyChartLine
  },
  data () {
    return {
      modal3: false,
      name: '',
      zw: '',
      data: [4, 3, 2, 3, 2, 3, 4],
      data1: [320, 300, 280, 284, 290, 270, 310],
      data2: [320, 300, 280, 284, 290, 270, 310],
      data3: [2, 3, 6, 5, 2, 4, 7],
      data4: [],
      modal1: false,
      modal2: false,
      columns12: [
        {
          title: '序号',
          key: 'id',
          align: 'center',
          width: '60px'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '职位',
          key: 'post',
          align: 'center'
        },
        {
          title: '外出次数',
          key: 'out',
          align: 'center'
        },
        {
          title: '办结量',
          key: 'num',
          align: 'center'
        },
        {
          title: '办结率',
          key: 'bjl',
          align: 'center'
        },
        {
          title: '投诉率',
          key: 'tsl',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          width: '300px'
        }
      ],
      data6: [
        {
          id: '01',
          name: '王雅琴',
          post: '科员',
          out: '10',
          num: '1200',
          bjl: '97%',
          tsl: '1%'
        },
        {
          id: '02',
          name: '郭明',
          post: '科员',
          out: '15',
          num: '1500',
          bjl: '98%',
          tsl: '1%'
        },
        {
          id: '03',
          name: '朱军',
          post: '科员',
          out: '20',
          num: '800',
          bjl: '96%',
          tsl: '2%'
        },
        {
          id: '04',
          name: '王明',
          post: '科员',
          out: '13',
          num: '980',
          bjl: '95%',
          tsl: '3%'
        }, {
          id: '05',
          name: '李明',
          post: '科员',
          out: '17',
          num: '1035',
          bjl: '95%',
          tsl: '1%'
        },
        {
          id: '06',
          name: '王桂荣',
          post: '科长',
          out: '30',
          num: '140',
          bjl: '99%',
          tsl: '1%'
        },
        {
          id: '07',
          name: '于美珩',
          post: '副科长',
          out: '20',
          num: '120',
          bjl: '98%',
          tsl: '1%'
        },
        {
          id: '08',
          name: '杨昕',
          post: '副处长',
          out: '30',
          num: '30',
          bjl: '100%',
          tsl: '0'
        },
        {
          id: '09',
          name: '刘金祥',
          post: '科员',
          out: '10',
          num: '1240',
          bjl: '97%',
          tsl: '2%'
        }, {
          id: '10',
          name: '王鸥佼',
          post: '科员',
          out: '15',
          num: '968',
          bjl: '96%',
          tsl: '3%'
        }
      ],
      columns13: [
        {
          title: '序号',
          key: 'id',
          align: 'center',
          width: '60px'
        },
        {
          title: '事项名称',
          key: 'name',
          align: 'center',
          width: '250px'
        },
        {
          title: '类别',
          key: 'type',
          align: 'center'
        },
        {
          title: '办理时间',
          key: 'time',
          align: 'center'
        },
        {
          title: '办理人',
          key: 'person',
          align: 'center'
        },
        {
          title: '办理地点',
          key: 'address',
          align: 'center'
        }
      ],
      data7: [
        {
          id: '01',
          name: '申请办理困难残疾人生活补贴',
          type: '事项办理',
          time: '2019-10-1',
          person: '郭军',
          address: '社区窗口'
        },
        {
          id: '02',
          name: '申请“救急难”',
          type: '事项办理',
          time: '2019-10-13',
          person: '崔学义',
          address: '社区窗口'
        },
        {
          id: '03',
          name: '申请临时救助',
          type: '事项办理',
          time: '2019-10-15',
          person: '达理强',
          address: '社区窗口'
        },
        {
          id: '04',
          name: '老人节在广场为老人理发',
          type: '组织活动',
          time: '2019-11-8',
          person: '70-80岁老人',
          address: '社区广场'
        },
        {
          id: '05',
          name: '健身器材维修',
          type: '公益活动',
          time: '2019-11-9',
          person: '李冰',
          address: '广场健身场所'
        },
        {
          id: '06',
          name: '申请临时救助',
          type: '事项办理',
          time: '2019-11-9',
          person: '郭军',
          address: '社区窗口'
        },
        {
          id: '07',
          name: '申请“救急难”',
          type: '事项办理',
          time: '2019-11-10',
          person: '于美珩',
          address: '社区窗口'
        },
        {
          id: '08',
          name: '申请临时救助',
          type: '事项办理',
          time: '2019-11-10',
          person: '达理强',
          address: '社区窗口'
        },
        {
          id: '09',
          name: '申请办理社区居住证明',
          type: '事项办理',
          time: '2019-11-10',
          person: '达理强',
          address: '社区窗口'
        },
        {
          id: '10',
          name: '申请办理特困人员身份确认',
          type: '事项办理',
          time: '2019-11-11',
          person: '李冰',
          address: '社区窗口'
        }
      ]
    }
  },
  methods: {
    ok () {
    },
    cancel () {
    },
    show () {
      this.modal1 = true
    },
    show1 () {
      this.modal2 = true
    },
    find () {
      let search = this.name
      let search2 = this.zw
      let newListData = [] //  用于存放搜索出来数据的新数组
      if (search && search2) {
        this.data4.filter(item => {
          if (item.name.indexOf(search) !== -1 && item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
            this.data4 = newListData
          }
        })
      } else if (search) {
        this.data4.filter(item => {
          if (item.name.indexOf(search) !== -1) {
            newListData.push(item)
            this.data4 = newListData
          }
        })
      } else if (search2) {
        this.data4.filter(item => {
          if (item.idcard.indexOf(search2) !== -1) {
            newListData.push(item)
            this.data4 = newListData
          }
        })
      } else {
        this.data4 = this.data6
      }
      // console.log(newListData)
    }
  },
  mounted () {
    this.data4 = this.data6
  }

}
</script>

<style scoped>
  .page_style {
    margin-top: 20px;
    text-align: right;
  }
</style>
